<template>
  <div class="footer">
    <footer class="footer-content">
      <ul class="aboutUs">
        <li class="aboutInfo"><a>关于我们</a></li>
        <li class="aboutInfo"><a>用户隐私权政策</a></li>
        <li class="aboutInfo"><a>用户服务协议</a></li>
        <li class="aboutInfo"><a>联系我们</a></li>
      </ul>
      <div class="icon-info">
        <div class="wechat">
          <img src="./image/weChat.svg"/>
        </div>
        <div class="phone">
          <img src="./image/phone.svg"/>
        </div>
      </div>
      <div>
        <p>Copyright © 2010-2022 南京爱一格网络科技有限公司 版权所有</p>
        <p>经营性许可证编号：<a>苏B2-20180515</a>&nbsp;&nbsp;
          <a>苏网文〔2021〕4647-106号</a></p>
        <a>苏ICP备20036081号</a>
        <p><a>苏公网安备 32010602010735号</a></p>
      </div>
    </footer>
  </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "Footer",
});
</script>

<script setup lang="ts">

</script>

<style scoped>
.footer{
  text-align: center;
  color: #b1b5c1;
  font-size: 14px;
  background-color: #221f23;
}

.footer-content{
  width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 24px 40px 18px;
}

.aboutUs{
  margin: 0 auto;
  width: 100%;
  display: flex;
  -webkit-padding-start: 0;
  list-style: none;
  justify-content: space-around;
}

.aboutUs .aboutInfo{
  width: calc(25% - 4px);
  list-style: none;
  border-right: 1px solid #eaecf0;
  display: list-item;
  text-align: -webkit-match-parent;
}

.icon-info{
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  width: 130px;
  margin: 28px auto 30px;
  font-style: italic;
}

.icon-info img{
  width: 26px;
  height: 24px;
}
</style>
